<template>
    <div class="IconSelect">
        <el-icon :size="20" v-if="modelValue" class="IconSelectIcon">
            <component :is="modelValue"></component>
        </el-icon>
        <el-select filterable :modelValue="modelValue" placeholder="请选择图标" @change="handleChange">
            <el-option v-for="item in icons" :key="item" :label="item" :value="item">
                <div class="iconSelectBody">
                    <el-icon>
                        <component :is="item"></component>
                    </el-icon>
                    <span class="iconSelectBodySpan">{{ item }}</span>
                </div>
            </el-option>
        </el-select>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import * as iconList from '@element-plus/icons-vue'

defineProps({
    modelValue: String,

})

const icons = ref(Object.keys(iconList))

// 选择图标
const emit = defineEmits(["update:modelValue"])
const handleChange = (icon) => {
    emit("update:modelValue", icon)
}
</script>
<style scoped lang="less">
.IconSelect {
    display: flex;
    align-items: center;
    width: 30%;

    .IconSelectIcon {
        margin-right: 2px;

        .iconSelectBody {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .iconSelectBodySpan {
                color: #727272;
            }
        }
    }


}
</style>